<template>
<div class="mapy">
    <div class="mapditu" ref="allmap1"></div>
    <mapy-haeder></mapy-haeder>
</div>
</template>

<script>
import mapyHaeder from './components/mapyHaeder'
import marKerImg from '../../assets/img/marker.png'
export default {
    name: 'mapy',
    data() {
        return {
            addList: [

                {
                    "id": "1",

                    "title": "东莞市康华医院"
                },
                {
                    "id": "2",

                    "title": "东莞市恒大御景"
                },
                {
                    "id": "3",

                    "title": "东莞市天安数码城"
                },
                {
                    "id": "4",

                    "title": "东莞市阳光第五小学"
                },

            ]

        }
    },

    components: {
        mapyHaeder
    },
    mounted() {
        this.addMap(0, 0)
    },

    methods: {
        addMap(m, n) {
            //声明map等于构建出来的地图实例并传入作用在allmap这个元素节点
            let map = new BMap.Map(this.$refs.allmap1)

            //声明myGeo等于 构建出来的地址解析实例
            let myGeo = new BMap.Geocoder()

            //    for循环将数组中的地址循环处理
            for (let i = 0; i < this.addList.length; i++) {

                // 声明title等于二维数组中【i】参数的下标的地址
                let title = this.addList[i]

                // 将循环出来的地址进行地址解析成经纬度
                myGeo.getPoint(this.addList[i].title, function (point) {
                    // console.log(point)
                    // 判断经纬度point是否存在
                    let marKer = new BMap.Marker(point)
                    if (point) {

                        //  声明myIcon等于new出来的BMap.Icon（将markerImg这个图片名传进来，并用BMap.Size（设置宽高）再设置周边距离
                        let myIcon = new BMap.Icon(marKerImg, new BMap.Size(60, 60), {
                            imageOffset: new BMap.Size(10, 5)
                        })

                        //  声明marKer等于new出来的BMap.Marker()这个标注位并传入经纬度point，将要添加的特殊标志对象名写在对象里
                        let marKer = new BMap.Marker(point, {
                            icon: myIcon
                        })

                        // 将marKer这个设置好的样式添加地图界面中
                        map.addOverlay(marKer)

                        //  设置地图缩放等级传入经纬度跟15的等级
                        map.centerAndZoom(point, 16, 5)
                    }

                })
            }
        }
    }

}
</script>

<style scoped>
.mapy {
    width: 100%;

}

.mapditu {

    height: 1500px;
    width: 100%;

}
</style>
